﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Jukebox.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jukebox jam!</title>
    <link href="css/jukeboxstyles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        


        (function ($) {

            var opts = {};//globals
            var methods = {
                init: function (options) {
                    // THIS 
                    console.log(this);
                    //console.log(options['color']);
                    //console.log(options.color);

                    //WooOOoooot!! 
                    //opts = $.extend(options, opts);
                    this.data = $.extend(options, this.data);
                    //console.log(opts.weight);
                    return this;
                },
                show: function () {
                    // IS
                },
                hide: function () {
                    // GOOD
                },
                update: function (content) {
                    // !!! 
                },
                get_option: function (opt) {
                    return this.data('color');
                    //return opt;
                }
            };

            $.fn.jukebox = function (method) {

                // Method calling logic
                if (methods[method]) {
                    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof method === 'object' || !method) {
                    return methods.init.apply(this, arguments);
                } else {
                    $.error('Method ' + method + ' does not exist on jQuery.jukebox');
                }
            };

        })(jQuery);

        /***********************************************************************
        *
        *   wrap idle machine
        *
        *
        *
        ************************************************************************/
        (function ($) {
            var opts = {}; //globals
            var methods = {
                init: function (options) {
                    this.data = $.extend(options, this.data);
                    return this;
                },
                show: function () {
                    // IS
                },
                hide: function () {
                    // GOOD
                },
                update: function (content) {
                    // !!! 
                },
                get_option: function (opt) {
                    return this.data('color');
                }
            };

            $.fn.idle = function (method) {

                // Method calling logic
                if (methods[method]) {
                    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof method === 'object' || !method) {
                    return methods.init.apply(this, arguments);
                } else {
                    $.error('Method ' + method + ' does not exist on jQuery.jukebox');
                }
            };
        })(JQuery);

        $(document).ready(function () {

            var o = {
                'width': '800',
                'height': '600',
                'color': 'pink',
                'weight': '600'
            };
            var jukebox_container = $("#wrapper").jukebox('init', o);

            //console.log(jukebox_container.jukebox('get_weight'));

            console.log($("#name-wrapper").jukebox('get_option', 'color'));


            var idle = true;
            var speed = 1000;
            $("body").append("<div id='eye_buster_one' class='eye-buster'></div>").append("<div id='eye_buster_two' class='eye-buster'></div>");

            function toggleIdle() {
                if ($("#eye_buster_one").is(':animated') || $("#eye_buster_two").is(':animated')) {
                    $("#eye_buster_one").stop().animate({ opacity: '100' }).css({ 'z-index': '501', 'display': 'block' }); ;
                    $("#eye_buster_two").stop().animate({ opacity: '100' }).css({ 'z-index': '500', 'display': 'block' }); ;
                } else {
                    var t1 = $("#eye_buster_one").css({ 'z-index': '501', 'background-color': getColor(), 'display': 'block' });
                    var t2 = $("#eye_buster_two").css({ 'z-index': '500', 'background-color': getColor(), 'display': 'block' });
                    t1.fadeOut(speed, t1_complete);
                }
            }

            toggleIdle();

            //eks toggle
            $("#eye_buster_one").click(function () {
                toggleIdle()
            });



            function t1_complete() {
                //start med at fade t2 ud
                $("#eye_buster_two").css('z-index', '501').fadeOut(speed, t2_complete);
                //fi
                $(this).css({ 'z-index': '500', 'background-color': getColor(), 'opacity': '1', 'display': 'block' });
            }
            function t2_complete() {
                $("#eye_buster_one").css('z-index', '501').fadeOut(speed, t1_complete);
                $(this).css({ 'z-index': '500', 'background-color': getColor(), 'opacity': '1', 'display': 'block' });
            }



            function getColor() {
                var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
                return hue;
            }


            $('#name-wrapper').append("<ul class='auto-complete-list'></ul>");

            $('.auto-complete-list')
                .css("background-color", "White")
                .css("top", "22px")
                .css("left", "88px")
                .css("z-index", "1000");

            $('#uiName').keyup(function () {
                $(".auto-complete-list").children().remove();

                // Assign handlers immediately after making the request,
                // and remember the jqxhr object for this request

                if ($("#uiName").val() != "") {

                    var request = { "Artist": $("#uiName").val(), "Limit": " 14" };
                    var jqxhr = $.post("Artistpusher.aspx", request)
                    .success(function (response) {

                        $.each(response, function (index, key) {
                            $("<li class='result'>" + key.Name + "</li>")
                                .data({
                                    'Artist': key.Name,
                                    'MbId': key.MbId
                                })
                                .appendTo(".auto-complete-list");
                        });

                        // Tilføj diverse events til de oprettede LI
                        $(".auto-complete-list li").each(function (intIndex) {
                            $(this).bind({
                                click: function () {
                                    $("#uiName").val($(this).data('Artist')).focus();
                                    //tilføj artist info til en ny song og push til playlist
                                    // playList.push(new song(Artist = 'sssss'));

                                    //console.log(playList[0].Artist);

                                    $(".auto-complete-list")
                                        .css("visibility", "hidden")
                                        .children()
                                        .remove();
                                },
                                mouseenter: function () {
                                    //console.log("mouseenter index: " + intIndex);
                                    $(this).css("background-color", "Orange");
                                },
                                mouseleave: function () {
                                    //console.log("mouseleave index: " + intIndex);
                                    $(this).css("background-color", "White");
                                }
                            });
                        });
                        $.isEmptyObject(response) ? $(".auto-complete-list").css("visibility", "hidden") : $(".auto-complete-list").css("visibility", "visible");

                    })
                    .error(function (response) {
                        //alert("error");
                        console.log('error: ' + response);
                    })
                    .complete(function (response) {
                        //alert("complete" + response.body); 
                    });

                } // end $("#uiName").val() != "")

            });

            // perform other work here ...
            // Set another completion function for the request above
            //jqxhr.complete(function () { alert("second complete"); });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper">
            <div class="input-form">
                <div id="name-wrapper">
                    <label for="uiName">Artist:</label>
                    <input type="text" id="uiName" name="uiName" autocomplete="off" />
                </div>
                <!--
                <div>
                    <label for="uiAlbum">Album:</label>
                    <input type="text" id="uiAlbum" name="uialbum" autocomplete="off" />
                </div>
                <div>
                    <label for="uiSong">Song:</label>
                    <input type="text" id="uiSong" name="uiSong" autocomplete="off" />
                </div>
            </div>
            <input type="button" id="uiSubmit" value="send" />
             -->
             </div>
        </div>
    </form>
</body>
</html>
